<template>
  <div class="box">
      <div class="box-item">
          <h1>一级分类</h1>
          <!-- <el-input size="mini" v-model="addyiji" placeholder="请输入新增内容"></el-input> -->
          <el-button class="btnstyle" size="mini" type="primary" @click="addcontent(1)">新增</el-button>
          <div class="item-text" v-for="item in oneOptions" :key="item.id" :class="{active:item.active === true}">
            <p @click="selectchange(item.name,1)">{{item.name}}</p>
            <img style="width:70px;height:50px;" :src="item.url" alt="">
            <el-button size="mini" type="danger" @click="addcontent(1,item,'edit')">修改</el-button>
            <el-button size="mini" type="danger" @click="deletedata(item.id,1)">删除</el-button>
          </div>
      </div>
      <div class="box-item">
        <h1>二级分类</h1>
          <!-- <el-input size="mini" v-model="adderji" placeholder="请输入新增内容"></el-input> -->
          <el-button class="btnstyle" size="mini" type="primary" @click="addcontent(2)">新增</el-button>
          <div class="item-text" v-for="item in twoOptions" :key="item.id" :class="{active:item.active === true}">
            <p @click="selectchange(item.name,2)">{{item.name}}</p>
            <el-button size="mini" type="danger" @click="addcontent(2,item,'edit')">修改</el-button>
            <el-button size="mini" type="danger" @click="deletedata(item.id,2)">删除</el-button>
          </div>

      </div>
      <div class="box-item">
        <h1>三级分类</h1>
        <!-- <el-input size="mini" v-model="addsanji" placeholder="请输入新增内容"></el-input> -->
        <el-button  class="btnstyle" size="mini" type="primary" @click="addcontent(3)">新增</el-button>
        <div class="item-text" v-for="item in threeOptions" :key="item.id">
          <p  @click="selectchange(item.name,3)">{{item.name}}</p>
          <img class="imgstyle" :src="item.url" alt="">
          <el-button size="mini" type="danger" @click="addcontent(3,item,'edit')">修改</el-button>
          <el-button size="mini" type="danger" @click="deletedata(item.id,3)">删除</el-button>
        </div>
      </div>
      <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="50%"
        @open="closedialog('form')">
        <fromcom :paramsform.sync="formaa" :filelist="filelist" ref="form" :fromList="fromList" :rules="rules"/>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="confim(3)">确 定</el-button>
        </span>
      </el-dialog>
      
  </div>
</template>

<script>
export default {
    data(){
      return{
        oneOptions:[],
        twoOptions:[],
        threeOptions:[],
        form:{
          yiji:undefined,
          erji:undefined,
          sanji:undefined,
        },
        addyiji:'',
        adderji:'',
        dialogVisible:false,
        formaa:{}, // 弹窗数据
        fromList:[
          {input:true,value:'name',label:'名称'},
          {upload:true,value:'url',label:'图片'},
        ],
        rules:{
          name:[{required:true,message:'名称不能为空',trigger:'blur'}],
          // url:[{required:true,message:'名称不能为空',trigger:'change'}],
        },
        panduanfnelei:null, // 判断几级分类
        filelist:[],
      }
    },
    created(){
      this.getList()
    },
    methods:{
      getList(value,str){
        this.$axios({url:'/qd/goodsType/getOneLevel',method:'get'}).then(res=>{
          this.oneOptions = res.data ?? []
        })
      },
      addcontent(value,row,str){ // 新增内容
        this.formaa={}
        this.filelist=[]
        // 新增一级分类
        if(value === 1){
          // 编辑时执行赋值
           if(str === 'edit'){
            this.formaa={...row}
            if(row.url) this.filelist=[{url:row.url}]
          }
          // 打开弹窗并且赋值分类
          this.dialogVisible=true
          this.panduanfnelei = value
          
        }
        // 新增二级分类
        if(value === 2){
          // if(!this.adderji) return this.$message.warning('输入框数据不能为空')
          const getid = this.oneOptions.filter(item=>item.active === true)
          if(getid.length === 0) return this.$message.warning('请先选择一级分类，再进行添加')
          // 编辑时执行赋值
          if(str === 'edit'){
            this.formaa={...row}
            if(row.url) this.filelist=[{url:row.url}]
            
          } 
          // 打开弹窗并且赋值分类
          this.dialogVisible=true
          this.panduanfnelei = value
          
        }
        // 新增三级分类
        if(value === 3){
          const getids = this.twoOptions.filter(item=>item.active === true)
          if(getids.length === 0) return this.$message.warning('请先选择二级分类，再进行添加')
          // 编辑时执行赋值
           if(str === 'edit'){
            this.formaa={...row}
            if(row.url) this.filelist=[{url:row.url}]
          }
          this.dialogVisible=true
          this.panduanfnelei = value
        }
      },
      editoptions(id,pan){  // 编辑菜单
        if(pan === 1){
          // this.oneOptions.forEach()
        }
      },
      closedialog(res){
        this.$nextTick(()=>{
          this.$refs[res].$refs[res].clearValidate()
        })
      },
      confim(e){
        this.$refs['form'].$refs['form'].validate((valid)=>{
          if(valid){
        // 一级分类
        if(this.panduanfnelei === 1){
          if(!this.formaa.url) return this.$message.warning('请先添加图片，再进行添加')
          // 编辑
          if(this.formaa.id){
            this.$axios({url:'/qd/goodsType/update',method:'put',data:this.formaa}).then(res=>{
              // 更新一级分类数据
             this.getList()
              this.$message.success('修改成功')
              this.dialogVisible=false
            })
          }else{
            // 新增
            this.$axios({url:'/qd/goodsType/create',method:'post',data:{type:1,...this.formaa}}).then(res=>{
              this.getList()
              this.$message.success('新增成功')
              this.dialogVisible=false
            })
          }
        }
        // 二级分类
        if(this.panduanfnelei === 2){
          // if(!this.formaa.url) return this.$message.warning('请先添加图片，再进行添加')
          // 编辑
          if(this.formaa.id){
            
            this.$axios({url:'/qd/goodsType/update',method:'put',data:this.formaa}).then(res=>{
              // 更新二级分类数据
              const arr = this.oneOptions.filter(item=>item.active===true)
              this.selectchange(arr[0].name,1)
              this.$message.success('修改成功')
              this.dialogVisible=false
            })
          }else{
            // 新增
            const getid = this.oneOptions.filter(item=>item.active === true)
            this.$axios({url:'/qd/goodsType/create',method:'post',data:{type:2,pid:getid[0].id,...this.formaa}}).then(res=>{
              // 更新二级分类数据
              const arr = this.oneOptions.filter(item=>item.active===true)
              this.selectchange(arr[0].name,1)
              this.$message.success('新增成功')
              this.dialogVisible=false
            })
          }
        }
        // 三级分类
        if(this.panduanfnelei === 3){
          if(!this.formaa.url) return this.$message.warning('请先添加图片，再进行添加')
          // if(!this.addsanji) return this.$message.warning('输入框数据不能为空')
          if(this.formaa.id){
            this.$axios({url:'/qd/goodsType/update',method:'put',data:this.formaa}).then(res=>{
              // 更新三级分类数据
              this.selectchange('',3)
              this.$message.success('修改成功')
              this.dialogVisible=false
            })
          }else{
            const getids = this.twoOptions.filter(item=>item.active === true)
            if(getids.length === 0) return this.$message.warning('请先选择二级分类，再进行添加')
            this.$axios({url:'/qd/goodsType/create',method:'post',data:{type:3,pid:getids[0].id,...this.formaa}}).then(res=>{
              // 更新三级分类数据
              this.selectchange('',3)
              this.$message.success('新增成功')
              this.dialogVisible=false
            })
          }
          
        }
          }
        })
       
      },
      selectchange(e,pan){
        
        // 一级分类选中
        if(pan === 1){
          this.oneOptions.forEach(item=>{
            if(item.name === e){
              this.$set(item,'active',true)
            }else{
              this.$set(item,'active',false)
            }
          })
          const id = this.oneOptions.filter(item=>item.active === true)[0].id
          this.$axios({url:'/qd/goodsType/getById',method:'get',params:{id}}).then(res=>{
            this.twoOptions = res.data ?? []
          })
          
        }
        // 二级分类选中
        if(pan === 2){
          let id =null
          this.twoOptions.forEach(item=>{
            if(item.name === e){
              id = item.id
              this.$set(item,'active',true)
            }else{
              this.$set(item,'active',false)
            }
          })
          this.$axios({url:'/qd/goodsType/getById',method:'get',params:{id}}).then(res=>{
            this.threeOptions = res.data ?? []
          })
        }
        // 三级分类选中
        if(pan === 3){
          const getids = this.twoOptions.filter(item=>item.active === true)
          if(getids.length === 0) return 
          this.$axios({url:'/qd/goodsType/getById',method:'get',params:{id:getids[0].id}}).then(res=>{
            this.threeOptions = res.data ?? []
          })
        }
      },
      deletedata(ids,e){
        this.$confirm('是否确认删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let idss = ids 
          // if(e === 1){
          //   const arr = this.oneOptions.filter(item=>this.form.yiji === item.name)
          //   idss = arr[0].id
          // }
          this.$axios({url:'/qd/goodsType/delete',method:'delete',params:{id:idss}}).then(res=>{
            this.$message.success('删除成功')
            // 更新数据
            if(e === 1){
              this.getList()
            }
             if(e === 2){
              const arr = this.oneOptions.filter(item=>item.active===true)
              this.selectchange(arr[0].name,1)
            }
             if(e === 3){
              const getids = this.twoOptions.filter(item=>item.active === true)
              this.selectchange(getids[0].name,2)
            }
          })
        })
        
      }
    }
}
</script>

<style lang="scss" scoped>
.box{
  width: 100%;
  height: 100%;
  // background-color: red;
  display: flex;
  justify-content: space-around;
  // flex-direction: column;
  // align-items: center;
  padding: 10px;
  .el-input,.btnstyle{
      margin-top: 20px;
    }
  .box-item{
    width: 30%;
    padding: 10px;
    border: 1px solid #ccc;
    display: flex;
    flex-direction: column;
    background: #ccc;
    .item-text{
      padding-top: 5px;
      margin-top: 5px;
      height: 60px;
      display: flex;
      align-items: center;
      // line-height: 40px;
      justify-content: space-between;
      .imgstyle{
        width: 50px;
        height: 50px;
        margin-right: 10px;
      }
      p{
        flex: 1;
        height: 40px;
        cursor: pointer;
      }
      
    }
    .active{
      background: rgb(190, 219, 177);
    }
  }
}
</style>